<template>
  <div class="climbingFrame">
    <el-row class="climbing_nav">
      <el-col :span="12" class="titles">爬架监测</el-col>
    </el-row>
    <el-row class="climbingContent">
      <el-col :span="24" class="main-top">
        <div>
          选择机位：
          <el-select v-model="camera" placeholder="请选择" @change="selectCameraData">
            <el-option
              v-for="(item,index) in cameraData"
              :key="index"
              :label="item.seat"
              :value="item.id"
            ></el-option>
          </el-select>
          <!-- <el-button type="primary" plain @click="refresh">刷新</el-button> -->
        </div>
      </el-col>
      <el-col :span="24">
        <template>
          <el-table :data="tableData" :header-cell-style="{'background-color': '#F5F5F5'}">
            <el-table-column prop="seat" label="机位"></el-table-column>
            <el-table-column prop="is_start" label="开/停机状态" :formatter="handleFiringStatusFilter">
            </el-table-column>
            <el-table-column prop="action" label="动作" :formatter="handleActionFilter">
            </el-table-column>
            <el-table-column prop="load" label="荷载（t）"></el-table-column>
            <el-table-column prop="status" label="状态" :formatter="handleMachineFilter">
            </el-table-column>
            <el-table-column prop="circuit" label="电路状态" :formatter="handleCircuitFilter">
            </el-table-column>
            <el-table-column prop="created_at" label="上传时间"></el-table-column>
          </el-table>
        </template>
      </el-col>
      <el-col :span="24" align="center" class="main-bottom">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { monitorPublicApi } from "@/services/ProjectCenter";
import { standardCodeApi } from "@/services/StandardCode";
export default {
  data() {
    return {
      tableData: [],
      camera: "",
      cameraData: [],
      page: 1,
      pageTotal: 0,
      projects: this.$route.query.projects,
      FiringStatus:[],
      action:[],
      machine:[],
      circuit:[],
    };
  },
  methods: {
    //获取表格数据
    getData() {
      monitorPublicApi
        .getClimbMonitorList({
          params: {
            project_id: this.projects,
            climb_machine_id: this.camera,
            page: this.page
          }
        })
        .then(res => {
          this.tableData = res.data.data;
          this.pageTotal = res.data.total;
        });
    },
    //刷新
    refresh() {},
    //获取机位数据
    getCameraData() {
      monitorPublicApi.getCameraList().then(res => {
        this.cameraData = res.data;
        if (this.cameraData) {
          this.camera = res.data[0].id;
        }
        this.getData();
      });
    },
    //选择机位
    selectCameraData() {
      this.getData();
    },
    //分页
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    },
    //启动状态
    getFiringStatus() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "climb_machine_start_status"
          }
        })
        .then(res => {
          this.FiringStatus = res.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
       //启动过滤
    handleFiringStatusFilter(row) {
      var firingStatus;
      this.FiringStatus.filter(item => {
        if (item.value == row.is_start) {
          firingStatus = item.name;
        }
      });
      return firingStatus;
    },
     //动作
    getActionData() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "climb_action"
          }
        })
        .then(res => {
          this.action = res.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
        //动作过滤
    handleActionFilter(row) {
      var action;
      this.action.filter(item => {
        if (item.value == row.action) {
          action = item.name;
        }
      });
      return action;
    },
     //机器状态
    getMachineData() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "climb_machine_start_status"
          }
        })
        .then(res => {
          this.machine = res.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    }, 
         //机器过滤
    handleMachineFilter(row) {
      var machine;
      this.machine.filter(item => {
        if (item.value == row.status) {
          machine = item.name;
        }
      });
      return machine;
    },
    //电路状态
    getCircuitData() {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "climb_circuit_status"
          }
        })
        .then(res => {
          this.circuit = res.data.list;
        })
        .catch(error => {
          console.log(error);
        });
    },
          //电路过滤
    handleCircuitFilter(row) {
      var circuit;
      this.circuit.filter(item => {
        if (item.value == row.circuit) {
          circuit = item.name;
        }
      });
      return circuit;
    },
  },
  created() {
    this.getCameraData();
    this.getFiringStatus();
    this.getActionData();
    this.getMachineData();
    this.getCircuitData();
  }
};
</script>
<style scoped lang="scss">
.climbing_nav {
  padding: 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #d9d9d9;
  height: 60px;

  .titles {
    text-align: left;
    line-height: 60px;
    font-size: 16px;
    color: #1441b3;
  }

  .backScreen {
    text-align: right;
    line-height: 60px;
  }
}

.climbingContent {
  padding: 0 20px;

  .main-top {
    margin-bottom: 20px;
  }

  .main-bottom {
    padding: 40px 0;
    text-align: center;
  }
}
</style>